<template>
  <div class="cute">
    <div class="cute_top">
      <div class="cute_top_left">
        <h3>LINE FRIENDS萌咖潮品</h3>
        <p>清凉一夏 <span>多买多优惠</span></p>
      </div>
      <div class="cute_top_right">
        <button>更多优惠GO</button>
      </div>
    </div>
    <div class="cute_con">
      <ul>
        <li v-for="(v,i) in this.$store.state.tidem.cutearr" :key="i" @click="todetail()">
            <div class="cute_img_box">
              <img :src="v.goods_img">
            </div>
            <div class="cute_info">
              <h4>{{v.goods_name}}</h4>
              <div class="cute_price">
                <p class="reality_price">￥{{v.goods_reality_price}} </p>
                <p class="original_price">￥{{v.goods_original_price}}</p>
              </div>
            </div>
            

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  mounted(){
    this.$store.dispatch("actionscute")
  },
  methods:{
        todetail(){
            this.$router.push("/tidedetail")
        }
    }
}
</script>

<style scoped>
  .cute{
    width: 95%;
    margin: auto;
    margin-top: 0.2rem;
    background-color: #f4cccc;
    border-radius: 0.07rem;
    padding: 0.1rem;
    box-sizing: border-box;
    overflow: hidden;
  }
  .cute .cute_top{
    height: 0.49rem;
    /* background-color: aquamarine; */
    display: flex;
    justify-content: space-between;
  }
  .cute .cute_top .cute_top_left h3{
    line-height: 0.22rem;
    font-size: 0.15rem;
  }
  .cute .cute_top .cute_top_left p{
    line-height: 0.27rem;
    font-size: 0.1rem;
    font-weight: bold;
  }
  .cute .cute_top .cute_top_left p span{
    display:inline-block;
    color: #fdf9f9;
    background-color: #d73e34;
    border-radius: 0.01rem;
    height: 0.14rem;
    line-height: 0.14rem;
    padding: 0 0.04rem;
  }
  .cute .cute_top .cute_top_right{
    width: 0.9rem;
    height: 0.2rem;
    margin-top: 0.15rem;
    /* background-color: cadetblue; */
  }
  .cute .cute_top .cute_top_right button{
    width: 100%;
    height: 100%;
    display: block;
    font-size: 0.09rem;
    background-color: #000000;
    border: 0;
    color: #ffffff;
    border-radius: 0.07rem;
    padding: 0 0.07rem;
    box-sizing: border-box;
    /* line-height: 0.2rem; */
  }
  .cute .cute_con{
    margin-top: 0.1rem;
  }
  .cute .cute_con ul{
    display: flex;
    justify-content: space-between;
    font-size: 0.1rem;
  }
  .cute .cute_con ul li{
    width: 1.07rem;
    height: 1.24rem;
    background-color: #fefffe;
    border-radius: 0.06rem;
    overflow: hidden;
  }
  .cute .cute_con ul li .cute_img_box{
    width: 100%;
    height: 0.8rem;
  }
  .cute .cute_con ul li .cute_img_box img{
    width: 100%;
  }
  .cute .cute_con .cute_info{
    padding: 0 0.1rem;
  }
  .cute .cute_con .cute_info h4{
    display:inline-block;
    overflow:hidden; 
    text-overflow: ellipsis;
    white-space: nowrap; 
    width: 0.9rem;
    color: #1b1b1b;
    line-height: 0.2rem;
  }
  .cute .cute_con .cute_info .cute_price{
    display: flex;
    justify-content: flex-start;
  }
  .cute .cute_con .cute_info .cute_price .reality_price{
    color: #da5320;
  }
  .cute .cute_con .cute_info .cute_price .original_price{
    text-decoration: line-through;
    color: #7f7f7f;
  }
</style>